<template>
  <div class="container-item-video-b" @click="linkHandler">
    <div class="container-bg">
      <!-- 封面 -->
      <div class="img-container-border">
        <div class="img-container">
          <vanImage :src="itemData.cover" class="cover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>加载失败</template>
          </vanImage>
        </div>
      </div>
      <!-- 标题组 -->
      <div class="title-layer-container">
        <div class="title-body">{{ itemData.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Image, loading } from 'vant'
export default {
  components: {
    vanImage: Image,
    vanLoading: loading
  },
  props: {
    itemData: {
      type: Object,
      required: false,
      default() {
        return {
          title: '默认标题',
          cover: 'https://placehold.it/1600x900'
        }
      }
    }
  },
  methods: {
    linkHandler(href) {
      const { itemData } = this
      this.$router.push({
        path: 'videoView',
        query: { title: itemData.title, url: itemData.link }
      })
    }
  }
}
</script>

<style lang="scss" >
.container-item-video-b {
  padding: 0 10px;
  position: relative;
  background-color: #000;
  .img-container {
    width: 100%;
    .cover {
      width: 100%;
    }
  }
  .container-bg {
    padding: 25px;
    border-style: none dashed;
    border-width: 10px;
    border-color: #f7f6e9;
  }
  .title-layer-container {
    text-align: center;
    white-space: nowrap;
    color: #fff;
  }
}
</style>
